<template>
  <div class="content">
    <van-nav-bar title="RFID" 
     class="header-top" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs class="monitor-page" v-model="active" @click="tabClk">
      <van-tab title="站点监控">
        <van-search v-model="value" @search="onSearch" @cancel="onCancel" placeholder="请输入搜索关键词" />
        <van-list class="page-list"  :finished="finished" finished-text="没有更多了">
            <van-cell-group v-for="(item, index) in List" :key="index">
              <van-cell icon="shop-o" :title="item.stationName" is-link  @click="gotoDetail(1, item)" />
              <div @click="showMonitor(item.stationName)">
                <div class="item">
                <span>读写器名称: {{ item.mc }}</span>
                <span>天线数量: {{ item.sl }}</span>
              </div>
              <div class="item">
                <span>异常天线数量: {{ item.mc }}</span>
                <span>异常天线所属楼层: {{ item.sl }}</span>
              </div>
              <div class="item">
                <span>地址: {{ item.address }}</span>
              </div>
              </div>
            </van-cell-group>
        </van-list>
      </van-tab>
      <van-tab title="设备安装">
        <van-search v-model="value" @search="onSearch" @cancel="onCancel" placeholder="请输入搜索关键词" />
        <van-list class="page-list">
            <van-cell-group v-for="(item, index) in List" :key="index">
              <van-cell icon="shop-o" :title="item.stationName" @click="gotoDetail(2, item)" is-link />
              <div class="equipment-item">
                <div>
                  <div style="line-height: 30px;">
                    <span>区县: {{ item.stationDistrict }}</span>
                    <span>楼层数: {{ item.floor }}</span>
                  </div>
                  <div style="line-height: 30px;">
                    <span>地址: {{ item.address }}</span>
                  </div>
                </div>
                <div class="image-item">
                  <img src="../assets/tx.png" />
                </div>
              </div>
            </van-cell-group>
        </van-list>
      </van-tab>
      <van-tab title="异常设备">
        <van-search v-model="value" @search="onSearch" @cancel="onCancel" placeholder="请输入搜索关键词" />
        <van-list class="page-list">
          <van-cell-group v-for="(item, index) in List" :key="index">
            <van-cell :title="item.stationName"  @click="gotoDetail(3, item)" />
            <div class="equipment-item">
              <div>
                <div class="equipment-item-content">
                  <span>设备类型: {{ item.idsId }}</span>
                  <span>异常数量: {{ item.alertDeviceNumber }}</span>
                </div>
                <div class="equipment-item-content">
                  <span>异常楼层: {{ item.alertFloorName }}</span>
                </div>
                <div class="equipment-item-content">
                  <span>生成时间: {{ item.genDate }}</span>
                </div>
              </div>
              <div class="image-item">
                <img src="../assets/tx.png" />
              </div>
            </div>
            <div class="item">
              <span>地址: {{ item.address }}</span>
            </div>
          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>
    <div class="no-data" v-if="List.length === 0 && !loading">
       <div><el-icon />暂无数据</div>
    </div>
    <van-loading v-if="List.length === 0 && loading" custom-class="loading" :text="`加载中...`" />
  </div>
</template>

<script>
import testApi from '@/api/test.js'

export default {
  name: 'rfid',
  data() {
    return {
      // List: [
      //   {
      //     title: '临沐史丹利办公楼',
      //     mc: '测试名称',
      //     sl: '123',
      //     dd: '天隆寺舒服舒服顺风车第三次'
      //   },
      //   {
      //     title: '临沐史丹利办公楼',
      //     mc: '测试名称',
      //     sl: '123',
      //     dd: '天隆寺舒服舒服顺风车第三次'
      //   },
      // ],
      List:[],
      active: 0,
      value: '',
      loading:false,
      finished: false,
      total: 0,
      page: 1,
      size: 10
    };
  },
  created(){
    this.getMonitor();
  },
  methods: {
    getMonitor(){
      testApi.getRfidStationMonitor({}).then(res=>{
        this.loading = false;
        if(res.data.code===0&&res.data.data){
          this.List = res.data.data.records;
        }
      })
    },
    getInstall(){
      testApi.getRfidVideoInstall({}).then(res=>{
        this.loading = false;
        if(res.data.code===0&&res.data.data){
          this.List = res.data.data.records;
        }
      })
    },
    getCatch(){
      testApi.geRfidtOfflineDevice({}).then(res=>{
        this.loading = false;
        if(res.data.code===0&&res.data.data){
          this.List = res.data.data.records;
        }
      })
    },
    tabClk(type){
      this.loading = true;
      this.List = [];
      if(type===0){
        this.getMonitor();
      }else if(type === 1){
        this.getInstall();
      }else{
        this.getCatch();
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    showMonitor(title){
      this.$router.push({
        path:"/monitorDetail",
        name:"monitorDetail",
        query:{
          title:title
        }
      })
    },
    gotoDetail(type, row){
      if(type===1){
        //站点监控详情
        this.$router.push({
          path:'/rfifDetail',
          query:row
        })
      }else if(type===2){
        //设备安装
        this.$router.push({
          path:'/addDevices',
          query:row
        })
      }else{
        //异常设备
        this.$router.push({
          path:'/AbDeDetail',
          query:row
        })
      }
    
    },
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__content {
  background-color: #eb4b4b;
}

::v-deep .van-nav-bar__title {
  color: #fff;
}

::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

::v-deep .van-nav-bar__text {
  color: #fff;
}

::v-deep .van-tab--active {
  color: #eb4b4b;
}

::v-deep .van-cell-group {
  margin: 13px 0;
}

::v-deep .van-cell__title {
  font-size: 18px;
  color: #000;
}

.item {
  font-size: 14px;
  display: flex;
  padding: 0 7%;
  line-height: 30px;
  justify-content: space-between;
}

.equipment-item {
  font-size: 14px;
  display: flex;
  padding: 0 7%;

  justify-content: space-between;
}

.equipment-item span {
  margin-right: 10px;
}

.equipment-item-content{
  line-height: 30px;
}

.content {
  background-color: #cccccc4a;
}

.image-item {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}
</style>